<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>天知道</title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#box{
			width: 600px;
			height: 100px;
			margin: 10px auto;
			text-align: center;
			padding: 10px;
			box-sizing: border-box;
		}
		h2{
			margin-bottom: 10px;
		}
		input{
			float: left;
			margin-left: 170px;
			width: 200px;
			height: 20px;
			border: #00AAFF solid 1px;
			padding-left: 10px;
			color: #c2c2c2;
			text-decoration: none;
		}
		button{
			width: 30px;
			float: left;
			background: #0086B3;
			margin-left: -1px;
			height: 22px;
			border: #0086B3 solid 1px;
			font-size: 8px;
		}
		ul{
			float: left;
			margin-left: 250px;
			list-style: none;
		}
		ul>li{
			float: left;
			width: 200px;
			height: 100px;
			text-align: center;
			border-right: #b5b5b5 solid 2px;
		}
		ul>li:last-child{
			border-right: none;
		}
		.info_type {
			font-size: 24px;
			color: orange;
		}
		.info_temp {
			color: orange;
		}
		.hot-city{
			width: 200px;
			height: 30px;
			margin-left: 640px;
			margin-top: -30px;
		}
		.hot-city a{
			float: left;
			margin-left: 10px;
			color: #20BD9A;
			text-decoration: none;
		}
	</style>
	<body>
		<div id="app">
			<div id="box">
				<h2>天知道</h2>
				<input type="text" placeholder="请输入要查询的城市" @keyup.enter="searchWeather()" v-model="city"/>
				<button type="button" class="input_btn" @click="searchWeather()">搜索</button>
			</div>
			<div class="hot-city">
				<a href="javascript:;" @click="changeCity('兰州')">兰州</a>
				<a href="javascript:;" @click="changeCity('武威')">武威</a>
				<a href="javascript:;" @click="changeCity('北京')">北京</a>
			</div>
			<ul>
				<li v-for="item in weatherList">
					<div class="info_type"><span class="iconfont">{{item.type}}</span></div>
					<div class="info_temp">
						<b>{{item.low}}</b>
						~
						<b>{{item.high}}</b>
					</div>
					<div class="info_date"><span>{{item.date}}</span></div>
				</li>
			</ul>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="../js/tian.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
 